<template>
  <!-- vip周礼包 -->
  <el-dialog :visible.sync="isShow" v-if="isShow" title="VIP周礼包" width="60%" :before-close="handleClose" top="50px" :close-on-click-modal="false">
    <div class="border-box">
      <page-details ref="baseForm" :data="data"/>
      <!-- <el-form ref="activityForm" :model="formParams" :rules="ruleForm" label-position="right" label-width="95px">
        <div class="flex item-box" v-for="(item,index) in itemData" :key="index">
          <div class="title width25">
            {{ item.label }}
          </div>
          <div class="content width80">
            <div v-show="item.key=='reward'" class="flex" style="height:auto;">
              <div class="title" style="height:auto;">
                <div class="flex" v-for="(second,two) in propItemData" :key="two">
                  <div class="btn-box-add" style="margin-top:0;">
                    <el-tooltip content="新增道具配置" v-show="itemIndex==two">
                      <el-button class="marginL10" size="mini" type="success" circle icon="el-icon-plus" @click="addReward" />
                    </el-tooltip>
                  </div>
                  <el-form-item class="item-clear" label="奖励:" label-width="50px">
                    <el-select class="width180" v-model="second.itemType" placeholder="请选择道具类型" filterable >
                      <el-option :label="fourthly.label" :value="fourthly.value" v-for="(fourthly, four) in propDataArray" :key="four"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item class="item-clear" label="数值:" label-width="50px">
                    <el-input-number class="width180 marginR5" :min="0" :max="999999999999" :precision="0" :controls="false" v-model="second.num" controls-position="right" clearable placeholder="请输入道具奖励数值"/>
                  </el-form-item>
                  <div class="btn-box-delete" label-width="60px">
                    <el-tooltip content="删除道具配置" v-show="propItemData.length != 1">
                      <el-button class="marginL10" size="mini" type="warning" circle icon="el-icon-minus" @click="deleteReward(two)" />
                    </el-tooltip>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-form> -->
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="medium" @click="handleClose">取 消</el-button>
      <el-button size="medium" type="primary" @click="handleConfirm('activityForm')">确 认</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {
  addActivity,
  editActivity
} from "@/api/activity";

import PageDetails from '../page-details.vue'
export default {
  components: {
    PageDetails,
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: function () {
        return {}
      }
    },
    propDataArray: {
      type: Array,
      default: function () {
        return this.$store.state.commonState.propDataArray
      }
    },
  },
  data () {
    return {
      isShow: false,
      ruleForm: {},
      formParams: {},
      itemData: [
        { label: '奖励', key: 'reward' },
      ],
      propItemData:[{itemType:1,num:0}],
      itemIndex:0,
    }
  },
  computed: {},
  watch: {
    show: function () {
      let that = this;
      that.isShow = that.show
      if (that.data) {
        that.formParams = JSON.parse(JSON.stringify(that.data))
        that.propItemData=that.formParams.reward
        that.itemIndex=that.formParams.reward.length-1
      } else {
        that.formParams = {}
        that.propItemData = [{itemType:1,num:0}]
        that.itemIndex = 0
      }
    }
  },
  mounted () { },
  methods: {
    // 确认
    handleConfirm (formvalue) {
      if(!this.$refs.baseForm.handleConfirm()){
        return false
      }
      let that = this, params = JSON.parse(JSON.stringify(this.$refs.baseForm.handleConfirm()));
      params.activity_type = 13
      // 奖励
      // params.other={}
      // params.other.reward = that.arrNumWan(JSON.parse(JSON.stringify(that.propItemData)))
      // params.other = JSON.stringify(params.other)
      that.$refs[formvalue].validate((valid) => {
        if (valid) {
          if(params.id){
            editActivity(params).then(function (res) {
              that.$message.success(res.msg)
              that.$emit('onHideDetails', true)
            }).catch((error) => {
              that.$message.error(error.msg)
            })
          }else{
            addActivity(params).then((res)=> {
              that.$message.success(res.msg)
              that.$emit('onHideDetails', true)
            }).catch((error) => {
              that.$message.error(error.msg)
            })
          }
        } else {
          return false;
        }
      });
    },
    // 新增道具
    addReward () {
      this.itemIndex++
      this.propItemData.push({
        itemType:1,num:0
      })
    },
    // 删除道具
    deleteReward (index) {
      this.itemIndex--
      this.propItemData.splice(index, 1,)
    },
    // 道具*10000
    arrNumWan(arr){
      arr.forEach(item=>{
        item.num=item.num*10000
      })
      return arr
    },
    // 取消
    handleClose () {
      this.$emit('onHideDetails', false)
    },
  }
}
</script>

<style scoped lang="scss">
.btn-box-add{
  width: 50px;
  text-align: center;
  margin-top: -20px;
  margin-left: -10px;
  .el-button{
    height: 28px;
  }
}
.btn-box-delete{
  width: 50px;
  text-align: center;
  .el-button{
    height: 28px;
  }
}
</style>
